<template>
  <div class="content">
    <dc-header :page-to="'/dishAnalysis'" :title="''" :rightIcon="''"></dc-header>
    <mt-navbar class="nav-block fixed-top" v-model="selected">
      <mt-tab-item id="0" @click.native="getUnsale(0)">畅销菜品</mt-tab-item>
      <mt-tab-item id="1" @click.native="getUnsale(1)">滞销菜品</mt-tab-item>
    </mt-navbar>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate" :startTime="this.curDate.startTime" :startDateType="this.curDate.type"></dc-date>
    </div>
    <mt-tab-container class="mt20" v-model="selected">
      <mt-tab-container-item id="0">
        <dc-cell :title="'销售排行'"></dc-cell>
        <mt-navbar class="nav-scroll" v-model="select">
          <mt-tab-item  @click.native="getList(item.dishCategoryCode)" :id="item.dishCategoryCode"
                       v-for="item in cateList" :key="item.dishCategoryCode">{{item.dishCategoryName}}
          </mt-tab-item>
        </mt-navbar>
        <div>
          <dc-rank ref="saleRank"
                   :titles="rankpTitle" :rankKey="pRankKey"
                   :param="param" :url="pUrl"></dc-rank>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="1">
        <dc-cell :title="'滞销排行'" :to="'/saleRuleSet'" :value="'滞销规则'" isLink></dc-cell>
        <mt-navbar class="nav-scroll" v-model="select">
          <mt-tab-item @click.native="getList(item.dishCategoryCode)" :id="item.dishCategoryCode"
                       v-for="item in cateList" :key="item.dishCategoryCode">{{item.dishCategoryName}}
          </mt-tab-item>
        </mt-navbar>
        <div>
          <dc-rank ref="unSaleRank"
                   :titles="rankuTitle" :rankKey="uRankKey"
                   :param="param" :url="uUrl"></dc-rank>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import date from '@/components/datetabbar/all';
  import rankList from '@/components/rankList';
  import api from '@/common/api/dishAnalysis';
  import store from '@/store/shopAlter';
  import {mapActions, mapGetters} from 'vuex';

  export default {
    components: {
      'dc-header': header,
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row,
      'dc-date': date,
      'dc-rank': rankList
    },
    data () {
      return {
        currentDate: {},
        storeCode: null,
        type: 1,
        param: {
          timeFlag: 1,  //时间范围标识，1-日；2-周；3-月；4-年
          beginTime: null,
          endTime: null,
          dishCategoryCode: 0 //菜品类别编码，0-全部类别；1-精选套餐2-酒水饮料；3-美味小吃
        },
        rankpTitle: [
          {name: '菜品', isRank: false},
          {name: '销量', isRank: false},
          {name: '销售金额', isRank: false}
        ],
        pRankKey: ['itemName', 'sellNum', 'itemSales'],
        pUrl: 'getPopularRank',
        rankuTitle: [
          {name: '菜品', isRank: false},
          {name: '单价', isRank: false},
          {name: '销量', isRank: false}
        ],
        uRankKey: ['itemName', 'unitPrice', 'salesNum'],
        uUrl: 'getUnsalableRank',
        cateList: [{dishCategoryName: '全部菜品', dishCategoryCode: 0}],
        selected: '0',
        select: 0
      };
    },
    created () {
      this.param.timeFlag = this.curDate.type;
      this.param.beginTime = this.curDate.startTime;
      this.storeCode = (store.state.shopAlter.store.storeCode || 0) + '/';
    },
    activated () {
      this.param.timeFlag = this.curDate.type;
      this.param.beginTime = this.curDate.startTime;
      this.storeCode = (store.state.shopAlter.store.storeCode || 0) + '/';
      this.select = 0;
    },
    computed: {
      ...mapGetters(['curDate'])
    },
    methods: {
      ...mapActions({saveDate: 'saveDate'}),
      getDate (date) {
        if (date) {
          this.saveDate(date);
          this.param.timeFlag = date.type;
          this.param.beginTime = date.startTime;
          this.param.endTime = date.endTime;
        }
        this._getCategory(this.storeCode + this.selected);
        if (this.selected === '0') {
          this.$refs.saleRank.changeList();
        } else {
          this.$refs.unSaleRank.changeList();
        }
      },
      getList (id) {
        this.param.dishCategoryCode = id;
        if (this.selected === '0') {
          this.$refs.saleRank.changeList();
        } else {
          this.$refs.unSaleRank.changeList();
        }
      },
      _getCategory (data) {  //获取菜品小类
        api.getCategory(data)
          .then(res => {
            if (res && res.length > 0) {
              this.cateList = [{dishCategoryName: '全部菜品', dishCategoryCode: 0}];
              this.cateList = this.cateList.concat(res);
            }
          });
      },
      getUnsale (num) {
        api.getCategory(this.storeCode + num)
          .then(res => {
            if (res && res.length > 0) {
              this.cateList = [{dishCategoryName: '全部菜品', dishCategoryCode: 0}];
              this.cateList = this.cateList.concat(res);
            }
          });
        this.getList('0');
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";

  .list {
    font-size: px2rem(30px);
    line-height: 2;
    background-color: #fff;
  }

  .head-bg {
    background-color: #f5f5f5;
    color: #666;
  }

  .fixed-top {
    position: fixed;
    top: px2rem(12px);
    left: 50%;
    margin-left: px2rem(-180px);
    width: px2rem(360px);
    z-index: 99;
  }

  .dish-img {
    width: px2rem(80px);
    height: px2rem(80px);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: px2rem(10px);
  }
</style>
